<template>
  <div class="inputTxt">
    <div>关键词{{ idx + 1 }}：</div>
    <div>
      <el-tag
        :key="tag"
        v-for="tag in dynamicTags"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
        v-trim
      >
      </el-input>
      <el-button
        v-else
        v-show="dynamicTags.length < 5"
        class="button-new-tag"
        size="small"
        @click="showInput"
      >
        +
      </el-button>
    </div>
    <div style="padding-left: 20px">
      得分比例<el-input-number
        style="margin-left: 10px"
        v-model="num"
        controls-position="right"
        @change="handleChange"
        :min="1"
        :max="100"
      ></el-input-number
      >%
    </div>
  </div>
</template>

<script>
export default {
  props: {
    idx: {
      type: Number,
      default: 0,
    },
    obj: {
      type: String,
      default: "",
    },
    keywordDelimeter: {
      type: String,
      default: "$",
    },
    isremove: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      optionObj: this.obj,
      dynamicTags: this.getDynamicTags(),
      num: this.getNum(),
      inputVisible: false,
      inputValue: "",
    };
  },
  computed: {},
  watch: {
    obj() {
      this.optionObj = this.obj;
      this.dynamicTags = this.getDynamicTags();
      this.num = this.getNum();
    },
  },
  created() {},
  mounted() {},
  methods: {
    getNum() {
      var _obj = JSON.parse(this.obj);
      if (_obj && _obj.num) {
        return _obj.num;
      } else {
        return 1;
      }
    },
    handleChange(value) {
      this.$emit("input", this.idx, this.getKeywordOption());
    },
    getDynamicTags() {
      var _obj = JSON.parse(this.obj);
      if (_obj && _obj.keywords) {
        return _obj.keywords.split(this.keywordDelimeter);
      } else {
        return [];
      }
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.$emit("input", this.idx, this.getKeywordOption());
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
        this.$emit("input", this.idx, this.getKeywordOption());
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    getKeywordOption() {
      const _keywords = this.dynamicTags
        ? this.dynamicTags.join(this.keywordDelimeter)
        : "";
      return {
        keywords: _keywords,
        num: this.num,
      };
    },
  },
};
</script>
<style lang="scss">
.inputTxt {
  display: flex;
  align-items: center;
  justify-content: start;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
